<template>
	<div class="container">
		<search-date
			:initTimeDatas="initTimeDatas"
			@getChangeTime="getChangeTime"
		></search-date>
		<div class="title">
			<span style="margin-right: 30px;">数据缺失检查数</span>
			<span class="two">数据缺失指上传的检查数据内相应的字段数据</span>
		</div>

		<my-table
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:page-size="listQuery.pagesize"
			:table-data="tableData"
			:total="total"
			@getCellData="getCellData"
			@refreshList="getList"
		>
			<el-table-column label="身份证号缺失数" slot="no_id_crad_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_id_crad_cnt !== 0 }">{{
						row.no_id_crad_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="手机号缺失数" slot="no_phone_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_phone_cnt !== 0 }">{{
						row.no_phone_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="检查号缺失数" slot="no_accession_number_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_accession_number_cnt !== 0 }">{{
						row.no_accession_number_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="报告时间缺失数" slot="no_report_time_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_report_time_cnt !== 0 }">{{
						row.no_report_time_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="申请科室缺失数" slot="no_request_dept_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_request_dept_cnt !== 0 }">{{
						row.no_request_dept_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="检查医生缺失数" slot="no_technician_name_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_technician_name_cnt !== 0 }">{{
						row.no_technician_name_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="报告医生缺失数" slot="no_report_doctor_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_report_doctor_cnt !== 0 }">{{
						row.no_report_doctor_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="审核医生缺失数" slot="no_audit_doctor_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_audit_doctor_cnt !== 0 }">{{
						row.no_audit_doctor_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="审核时间缺失数" slot="no_audit_time_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_audit_time_cnt !== 0 }">{{
						row.no_audit_time_cnt
					}}</a>
				</template>
			</el-table-column>
			<el-table-column label="检查项目缺失数" slot="no_examine_item_cnt">
				<template slot-scope="{ row }">
					<a :class="{ underline: row.no_examine_item_cnt !== 0 }">{{
						row.no_examine_item_cnt
					}}</a>
				</template>
			</el-table-column>
		</my-table>
		<!-- 数据质量详情-->
		<el-dialog
			:visible.sync="dialogVisible"
			:title="title"
			width="960px"
			height="500px"
		>
			<my-table
				:col-configs="colDetailConfigs"
				:list-loading="listLoading"
				:page-size="listQuery.pagesize"
				:table-data="tableDataDetail"
				:total="totalDetail"
				@refreshList="getErrorDeatil"
			>
				<el-table-column label="就诊类型" slot="patient_class" width="120px">
					<template slot-scope="{ row }">
						<span v-if="row.patient_class === 0">门诊</span>
						<span v-if="row.patient_class === 1">住院</span>
						<span v-if="row.patient_class === 2">急诊</span>
						<span v-if="row.patient_class === 3">体检</span>
						<span v-if="row.patient_class === 4">普通</span>
					</template>
				</el-table-column>
				<el-table-column label="患者性别" slot="patient_sex" width="120px">
					<template slot-scope="{ row }">
						<span v-if="row.pateint_sex === 0">男</span>
						<span v-if="row.pateint_sex === 1">女</span>
						<span v-if="row.pateint_sex === 2">未知</span>
					</template>
				</el-table-column>
			</my-table>
		</el-dialog>
	</div>
</template>

<script>
import searchDate from '@/components/common/searchDate'
import myTable from '@/components/myTable'
import { getDataQuality, get_data_quality_detail } from '@/api/data-watch'
export default {
	name: 'collQuality',
	components: {
		searchDate,
		myTable,
	},
	data () {
		return {
			showSummary: true,
			listQuery: {
				pagesize: 10,
				pageindex: 1
			},
			initTimeDatas: [
				{
					text: '不限',
					code: 'allTime'
				},
				{
					text: '昨天',
					code: 'lastDay'
				},
				{
					text: '最近一周',
					code: 'lastOneWeek'
				},
				{
					text: '最近一月',
					code: 'lastOneMonth'
				}
			],
			colConfigs: [
				{
					prop: 'depart_name',
					label: '科室',
					sortable: false
				},
				{ slot: 'no_id_crad_cnt' },
				{ slot: 'no_phone_cnt' },
				{ slot: 'no_accession_number_cnt' },
				{ slot: 'no_report_time_cnt' },
				{ slot: 'no_request_dept_cnt' },
				{ slot: 'no_technician_name_cnt' },
				{ slot: 'no_report_doctor_cnt' },
				{ slot: 'no_audit_doctor_cnt' },
				{ slot: 'no_audit_time_cnt' },
				{ slot: 'no_examine_item_cnt' },
				// todo 总计求和
				{
					prop: 'total_sum',
					label: '总计',
					sortable: false
				}
			],
			colDetailConfigs: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{
					prop: 'patient_name',
					label: '患者姓名',
					width: '80px'
				},
				{
					prop: 'med_rec_no',
					label: '病历号'
				},
				{ slot: 'patient_class' },
				{
					prop: 'perform_depart_name',
					label: '检查科室',
					width: '80px'
				},
				{
					prop: 'exam_type',
					label: '检查类型',
					width: '80px'
				},
				{
					prop: 'exam_item',
					label: '检查项目',
					width: '80px'
				},
				{
					prop: 'mobile_phone',
					label: '手机号码',
					width: '180px'
				},
				{
					prop: 'id_card_no',
					label: '身份证号',
					width: '200px'
				},
				/* {
					prop: 'disk_space',
					label: '存储容量',
					sortable: false,
					width: '100px'
				}, */
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'report_time',
					label: '报告时间',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'archive_time',
					label: '归档时间',
					sortable: false,
					width: '180px'
				}
			],
			tableDataDetail: [],
			totalDetail: 0,
			tableData: [],
			total: null,
			listLoading: false,
			errorList: [
				{ label: '手机号缺失数', value: 0 },
				{ label: '身份证号缺失数', value: 1 },
				{ label: '申请科室缺失数', value: 2 },
				{ label: '报告时间缺失数', value: 3 },
				{ label: '报告医生缺失数', value: 4 },
				{ label: '审核时间缺失数', value: 5 },
				{ label: '审核医生缺失数', value: 6 },
				{ label: '检查医生缺失数', value: 7 },
				{ label: '检查项目缺失数', value: 8 },
				{ label: '检查号缺失数', value: 9 }
			],
			dialogVisible: false,
			title: null
		}
	},
	computed: {},
	created () { },
	mounted () {
		this.getList()
	},
	methods: {
		getChangeTime ( val ) {
			// 获取时间
			console.log( val )
			this.listQuery = Object.assign( this.listQuery, val )
			this.getList()
		},
		getTime ( val ) {
			//  时间选择
			console.log( val )
			this.getList()
		},
		getList ( val ) {
			// 采集质量-机构管理
			getDataQuality( this.listQuery ).then( res => {
				// 求和
				if ( res.code === 0 ) {
					// 求和
					let temp_data = [ ...res.data ]
					temp_data.forEach( item => {
						// 去除不必要项
						delete item.no_birth_date_cnt
						delete item.no_diagnosis_cnt
						const sum1 = Object.values( item )
							.slice( 2 )
							.reduce( ( prev, next, index, array ) => prev + next )
						item.total_sum = sum1
					} )
					this.tableData = temp_data
				}
			} )
		},
		getCellData ( obj ) {
			// 单元格点击
			console.log( obj )
			// 获取详情
			let params = {
				missing_item_type: null,
				depart_code: obj.row.depart_code
			}
			let missing_label = obj.column.label
			let error = this.errorList.filter( error => {
				return error.label === missing_label
			} )
			params.missing_item_type = error[ 0 ].value
			this.title = error[ 0 ].label
			// 如果数量为0 不请求
			console.log( obj.row[ obj.column.property ] );
			if ( obj.row[ obj.column.property ] !== 0 ) {
				this.dialogVisible = true
				this.getErrorDeatil( params )
			}
		},
		getErrorDeatil ( params ) {
			// 获取详情
			get_data_quality_detail( params ).then( res => {
				if ( res.code === 0 ) {
					// 展开弹窗
					// 渲染数据
					this.tableDataDetail = res.data
					this.totalDetail = res.page.total_count
				}
			} )
		},
	},
	watch: {},
	filter: {}
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.title {
		margin: 30px 0;
		height: 40px;
		line-height: 40px;
	}
	.el-table .cell.el-tooltip {
		cursor: point;
	}
}
h3 {
	color: @333;
	display: inline-block;
	margin: 30px 0;
}
div span {
	margin-right: 10px;
}
/* 1.背景图 */
.two {
	// width: 22%;
	height: 40px;
	padding: 0px 15px 0 0;
	margin-left: -25px;
	background-image: url('~@/assets/imgs/juxing.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: #ef8900;
	line-height: 40px;
	text-indent: 20px;
	display: inline-block;
}
.el-dialog /deep/ .el-dialog-div {
	height: 640vh;
	overflow: auto;
}
</style>
